<template>
  <el-container>
    <el-header :style="obj">
      <div>
        <img src alt />
        <router-link :to="'/home'" style="color:rgb(202, 214, 157)">
        <span id="header-title">COCO视频</span>
        </router-link>
      </div>
      <el-input placeholder="用户名称" clearable v-model="queryInfo.query.keyWord" @clear="search()">
        <el-button id="btn1" slot="append" icon="el-icon-search" @click="search()"></el-button>
      </el-input>
      <div>
        <i class="el-icon-upload" @click="showUpload()" style="cursor:pointer"></i>
        <el-dropdown style="color:rgb(202, 214, 157)">
          <span>
            <i class="el-icon-stopwatch" style="cursor:pointer"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="width:300px;height:350px">
            <el-scrollbar style="height: 100%;">         
              <el-dropdown-item divided v-for="o in historyList" :key="o.id" width="100px">
                <router-link :to="'/video/' + o.videoId">
                <el-row>
                  <el-col :span="8"><span>{{o.videoName}}</span></el-col>
                  <el-col :span="16"><span>{{o.hisTime}}</span></el-col>
                </el-row>
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item style="float:right" :style="{'display': (historyList.length<=0 ? 'none':'block')}"><el-button type="danger" round @click="deleteHistory()" size="small">删除记录</el-button></el-dropdown-item>
            </el-scrollbar>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="color:rgb(202, 214, 157)">
          <span>
            <i class="el-icon-user" style="cursor:pointer"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="showInfo()">用户信息</el-dropdown-item>
              <el-dropdown-item divided @click.native="showCollection()">收藏列表</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 上传弹窗 -->
    <add-or-update v-if="showUpVisible" ref="addOrUpdate"></add-or-update>
    <el-main>
      <el-carousel height="550px">
        <el-carousel-item v-for="item in img" :key="item.id">
          <router-link :to="'/video/' + item.id">
            <img :src="item.imageId" alt width="100%" height="100%" style="cursor: pointer;" />
          </router-link>
        </el-carousel-item>
      </el-carousel>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#232325"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <!-- 导航栏 -->
        <el-menu-item
          :index="item.id"
          v-for="item in naviList.slice(0 , nums)"
          :key="item.id"
          @click="GotoSearch(item.id)"
        >{{item.naviName}}</el-menu-item>
        <el-menu-item index="xx" @click="changeNums()" style="cursor:pointer">更多</el-menu-item>
      </el-menu>

      <div id="allbody">
        <div id="mianBody">
          <span>今日热播</span>
          <el-row>
            <el-col :span="4" v-for="o in videoToday" :key="o.id" :style="{padding: '16px'}">
              <router-link :to="'/video/' + o.id">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="o.imageId" width="100% " height="135px" />
                  <div id="video-name">
                    <span>{{o.videoName}}</span>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </div>

        <div id="mianBody">
          <div id="moreCo">
            <span>热门影视</span>
            <p style="cursor:pointer" @click="hotTvMore()">更多></p>
          </div>
          <el-row>
            <el-col :span="8" :style="{padding: '16px'}" v-if="videoTv[0]!==undefined">
              <router-link :to="'/video/' + videoTv[0].id">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="videoTv[0].imageId" width="100% " height="330px" />
                  <div id="video-name">
                    <span>{{videoTv[0].videoName}}</span>
                  </div>
                </el-card>
              </router-link>
            </el-col>
            <el-col :span="4" v-for="o in videoTv.slice(1)" :key="o.id" :style="{padding: '16px'}">
              <router-link :to="'/video/' + o.id">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="o.imageId" width="100% " height="135px" />
                  <div id="video-name">
                    <span>{{o.videoName}}</span>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </div>

        <div id="mianBody">
          <el-row>
            <el-col :span="24" :style="{padding: '16px'}">
              <el-card :body-style="{ padding: '0px',height: '90px' }">
                <img
                  src="https://r1.ykimg.com/material/0A03/A1/202004/0401/3047261/1585711413131/0D0100005E840DEF3950594464355658.jpg"
                  width="100% "
                  height="90px"
                />
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div id="mianBody">
          <div id="moreCo">
            <span>小视频</span>
            <p style="cursor:pointer" @click="specialMore()">更多></p>
          </div>
          <el-row>
            <el-col :span="4" v-for="o in videoSpecial" :key="o.id" :style="{padding: '16px'}">
              <router-link :to="'/video/' + o.id">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="o.imageId" width="100% " height="135px" />
                  <div id="video-name">
                    <span>{{o.videoName}}</span>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
    <el-footer id="dad">
      <div>
      <div>gitee网站地址<a href="https://gitee.com/ghostlaycoo">@gitee.com</a></div>
      <div><img id="imgq" src="../assets/微信码.png" width="30px" height="30px" alt="关注我"/></div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import AddOrUpdate from "./Dialog";
import Conversion from "../assets/js/conversion";
export default {
  components: {
    AddOrUpdate
  },
  data() {
    return {
      //影视推荐类型集合
      tvTypes: ["017d8316-ccef-4268-bcea-25198b2875e0","72e23b86-f50c-4cba-8f68-f7728cdd980a"],
      //特殊字段类型集合
      oneType:["1cacb1a9-d554-430d-98f2-1b6259aa5e3c"],
      queryInfo: {
        query: {
          keyWord: "",
          typeId: [],
          times: []
        },
        pageIndex: 1,
        pageSize: 6
      },
      img: [],
      obj: {
        position: "static"
      },
      activeIndex: "1",
      nvaiContidtion: {
        keyWord: ""
      },
      naviList: [],
      nums: 10,
      //今日视频推荐
      videoToday: [],
      //影视热门
      videoTv: [],
      //特选视频
      videoSpecial: [],
      //显示上传
      showUpVisible: false,
      //历史记录
      historyList:[],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.showIcon);
    var that = this;
    Conversion.$on("H_refresh", function() {
      that.getVideoToday();
      that.getVideoTv();
      that.getVideoSpecial();
    });
  },
  created() {
    this.getNaviList();
    this.getVideoToday();
    this.getVideoTv();
    this.getHistoryList()
  },
  methods: {
    //获取特别类型视频
    async getVideoSpecial() {
      this.queryInfo.query.typeId = this.oneType
      await this.$http
        .post("/manager/video/getVideosByCondition", this.queryInfo)
        .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          console.log(resp.data.data);
          this.videoSpecial = resp.data.data;
          this.queryInfo.query.typeId = []
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //获取历史记录
    async getHistoryList(){
      await this.$http.get("/portal/common/getTodeyHistory")
       .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          this.historyList = resp.data;
          console.log(this.historyList)
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //删除历史记录
    async deleteHistory(){
      await this.$http.delete("/portal/common/deleteHistory")
       .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          this.getHistoryList();
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //视频搜索
    search(){
      var jsonString = JSON.stringify(this.queryInfo.query)
      this.$router.push({
        path:'/search',query:{keyWord:jsonString}
      })
    },
    //退出
    async logout() {
      this.setLoadStatus("logOut")
      window.sessionStorage.clear();
      this.$router.push("/login"); 
    },
    //设置登录状态
    async setLoadStatus(userId){
      await this.$http.put(`manager/user/updateStatus/${userId}/${'0'}`).then(resp=>{
        if(resp.status !== 200) return this.$message.error("更新失败！")
      })
    },
    //获取热门影视
    async getVideoTv() {
      this.queryInfo.query.typeId = this.tvTypes
      await this.$http
        .post("/portal/facade/getVideoForOne",this.queryInfo)
        .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          this.videoTv = resp.data;
          this.img = resp.data.slice(0, 3);
          this.getVideoSpecial()
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //获取今日热门视频
    async getVideoToday() {
      await this.$http
        .get("/portal/facade/getVideoByToday")
        .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          console.log(resp.data);
          this.videoToday = resp.data;
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //获取导航栏
    async getNaviList() {
      await this.$http
        .post("/portal/facade/getNaviInfoList", this.nvaiContidtion)
        .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          this.naviList = resp.data;
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //获取更热门视频
    hotTvMore(){
      this.queryInfo.query.keyWord = ""
      this.queryInfo.query.typeId = this.tvTypes
      console.log(this.queryInfo)
      var jsonString = JSON.stringify(this.queryInfo.query)
      this.$router.push({
        path:'/search',query:{keyWord:jsonString}
      })
    },
    //获取更多小视频
    specialMore(){
      this.queryInfo.query.keyWord = ""
      this.queryInfo.query.typeId = this.oneType
      console.log(this.queryInfo)
      var jsonString = JSON.stringify(this.queryInfo.query)
      this.$router.push({
        path:'/search',query:{keyWord:jsonString}
      })
    },
    showIcon() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 500
      ) {
        this.obj.position = "fixed";
      } else {
        this.obj.position = "static";
      }
    },
    changeNums() {
      if (this.nums === 10) {
        this.nums = 99;
      } else {
        this.nums = 10;
      }
    },
    showUpload() {
      this.showUpVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init();
      });
    },
    showCollection(){
      this.showUpVisible = true
      this.$nextTick(()=>{
        this.$refs.addOrUpdate.initCollection();
      })
    },
    showInfo(){
      this.showUpVisible = true
      this.$nextTick(()=>{
        this.$refs.addOrUpdate.initInfo();
      })
    },
    GotoSearch(id){
      this.queryInfo.query.keyWord = ""
      this.queryInfo.query.typeId[0] = id
      console.log(this.queryInfo)
      var jsonString = JSON.stringify(this.queryInfo.query)
      this.$router.push({
        path:'/search',query:{keyWord:jsonString}
      })
    }
  }
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #232325;
  display: flex;
  width: 100%;
  position: static;
  z-index: 999;
  justify-content: space-between;
  padding-left: 3%;
  padding-right: 3%;
  align-items: center;
  color: rgb(202, 214, 157);
  font-style: italic;
  font-size: 25px;
  font-family: "微软雅黑";
  > div {
    i {
      margin-left: 30px;
      font-size: 30px;
    }
  }
  > .el-input {
    width: 30%;
  }
}

#dad {
  background-color: #232325;
  display: flex;
  width: 100%;
  height: 150px;
  color: #FFFFFF;
  padding: 0px;
  > div {
    margin:auto;
    > div {
      > a {
        color: #FFFFFF;
      }
    }
  }
}

.el-carousel__item img {
  color: #475669;
  opacity: 1;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-carousel {
  background-color: rgba(94, 94, 43, 0.9);
  padding: 0 0;
}

.el-main {
  margin: 0;
  padding: 0;
}
.el-menu {
  padding-left: 28% !important;
  padding-right: 28% !important;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu {
  z-index: 1;
}

#allbody {
  margin: auto;
  width: 76%;
  background-color: rgb(249, 249, 249);
}

#imgq{
  margin-left: 70px;
}

#mianBody {
  margin: auto;
  margin-top: 20px;
  > span {
    margin-left: 5px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-size: 40px;
  }
  > .el-row {
    > .el-col {
      > .el-card {
        cursor: pointer;
      }
    }
  }
}
#moreCo {
  display: flex;
  > span {
    margin-left: 5px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-size: 40px;
    margin-right: 10px;
  }
  > p {
    line-height: 50px;
    margin-bottom: 0%;
  }
}
</style>